<template>
  <div class="container-fluid py-4">
    <h1 class="text-center mb-5">物业管理系统 - 管理员帮助文档</h1>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>1. 登录与权限</h2>
        <h5>1.1 登录系统</h5>
        <p>
          管理员可以通过系统提供的登录页面输入用户名和密码进行登录。成功登录后，您将进入后台管理页面。系统会根据您的权限展示相应的功能和数据。
        </p>
        <h5>1.2 权限管理</h5>
        <p>
          管理员是系统的最高权限用户，拥有所有模块的操作权限。您可以管理房屋信息、查看数据统计、发布公告等。
        </p>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>2. 房屋管理</h2>
        <h5>2.1 查看房屋列表</h5>
        <p>
          管理员可以在房屋管理页面查看所有房屋的状态，包括“空闲”、“已入住”等状态。每个房屋都有详细的编号、楼层、面积和状态信息。
        </p>
        <h5>2.2 房屋状态修改</h5>
        <p>
          如果房屋状态发生变化（例如入住、空闲等），管理员可以直接在房屋列表中修改状态。点击房屋项，选择对应的状态进行更新。
        </p>
        <h5>2.3 房屋信息编辑</h5>
        <p>
          管理员可以查看和编辑每个房屋的详细信息，如房屋编号、面积、租金等。在房屋列表中，点击“编辑”按钮后进入修改页面。
        </p>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>3. 数据统计</h2>
        <h5>3.1 查看房屋空闲数量</h5>
        <p>
          系统自动计算并展示空闲房间的数量，管理员可以快速查看当前空闲的房屋数量。
        </p>
        <h5>3.2 入住情况统计</h5>
        <p>
          系统统计当前已入住的住户数量和入住率，帮助管理员更好地了解小区的入住情况。
        </p>
        <h5>3.3 房间数据趋势</h5>
        <p>
          通过图表形式，系统展示房间数据的变化趋势，包括空闲房、已入住房、入住率等数据的变化情况。管理员可以根据这些数据做出合理的决策。
        </p>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>4. 公告管理</h2>
        <h5>4.1 发布公告</h5>
        <p>
          管理员可以通过系统发布公告，公告内容可以是系统升级通知、维修通知、安全检查等。发布公告时，请确保内容准确无误。
        </p>
        <h5>4.2 查看历史公告</h5>
        <p>
          管理员可以在公告页面查看之前发布的公告。系统会自动记录公告的发布时间、内容和状态。
        </p>
        <h5>4.3 编辑和删除公告</h5>
        <p>
          管理员可以编辑已发布的公告内容，也可以删除不再需要的公告。请注意，删除公告后无法恢复。
        </p>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>5. 系统设置</h2>
        <h5>5.1 修改管理员密码</h5>
        <p>
          管理员可以通过“设置”页面修改自己的登录密码。密码修改后，请确保妥善保管，避免未经授权的访问。
        </p>
        <h5>5.2 系统日志</h5>
        <p>
          系统会记录所有管理员的操作日志，管理员可以查看日志来了解系统的操作历史，确保所有操作符合规范。
        </p>
        <h5>5.3 系统通知</h5>
        <p>
          管理员可以设置系统的通知方式，包括通过邮件、短信等方式通知业主或工作人员。请确保通知内容清晰、及时。
        </p>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>6. 常见问题</h2>
        <h5>6.1 如何查看某一房屋的详细信息？</h5>
        <p>
          在房屋管理页面，点击房屋列表中的“查看”按钮，您可以查看该房屋的详细信息，包括编号、面积、状态等。
        </p>
        <h5>6.2 如何修改房屋状态？</h5>
        <p>
          点击房屋列表中的“编辑”按钮，您可以修改房屋的状态，如将空闲房屋标记为已入住等。
        </p>
        <h5>6.3 如何发布公告？</h5>
        <p>
          在公告管理页面，点击“发布公告”按钮，填写公告标题和内容，然后点击发布即可。
        </p>
        <h5>6.4 如果忘记了登录密码，怎么办？</h5>
        <p>
          请联系系统管理员或技术支持人员重置密码。确保密码安全，避免泄露。
        </p>
      </div>
    </div>

    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <h2>7. 联系支持</h2>
        <p>
          如果您在使用过程中遇到问题，或者有任何关于系统的疑问，您可以通过以下方式联系我们的技术支持团队：
        </p>
        <ul>
          <li><strong>客服电话：</strong> 400-123-4567</li>
          <li><strong>电子邮件：</strong> <a href="mailto:support@propertymanagement.com">support@propertymanagement.com</a></li>
          <li><strong>在线客服：</strong> 在系统中点击右下角的“帮助”按钮，立即与我们联系。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminHelpDocument',
};
</script>

<style scoped>
h1 {
  font-size: 2rem;
  font-weight: 700;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

h5 {
  font-size: 1.2rem;
  font-weight: 500;
}

.card-body p {
  font-size: 1rem;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

ul li {
  font-size: 1rem;
  margin-bottom: 5px;
}

a {
  color: #007bff;
}
</style>
